<template>
  <div>
    <j-dialog
      :title="title"
      ref="JDialog"
      :closable="true"
      @loginConfirm="loginConfirm"
      :btnList="btnList"
    >
      <template v-slot:j-dialog-main-content>
        <div class="login-panel">
          <div class="login-panel-item">
            <span>账号：</span>
            <input placeholder="请输入账号" v-model="account" />
          </div>
          <div class="login-panel-item">
            <span>密码：</span>
            <input
              type="password"
              placeholder="请输入密码"
              v-model="password"
            />
          </div>
          <div class="login-panel-item">
            <span>默认账号密码：admin、admin</span>
          </div>
        </div>
      </template>
    </j-dialog>
  </div>
</template>

<script>
import { hex_md5 } from "../util/md5";
import { login } from "../config/api";
import { mapMutations } from "vuex";
export default {
  name: "loginPanel",
  data() {
    return {
      account: "",
      password: "",
      title: "登录",
      btnList: [
        {
          text: "取消",
          style: {
            backgroundColor: "orangered"
          },
          click: "close"
        },
        {
          text: "确认",
          style: {
            backgroundColor: "seagreen"
          },
          click: "loginConfirm"
        }
      ]
    };
  },
  methods: {
    ...mapMutations(["setJBlogLogin"]),
    async loginConfirm() {
      const res = await this.httpGet(login, {
        username: this.account,
        password: hex_md5(this.password)
      });
      if (res.code == 1 && res.data == "登录成功") {
        this.$refs["JDialog"].closeDialog();
        alert("登录成功");
        localStorage.setItem("JBlogLogin", true);
        localStorage.setItem("JUsername", this.account);
        localStorage.setItem("JPassword", hex_md5(this.password));
        this.setJBlogLogin(false);
        this.$router.go(0);
      } else {
        alert(res.data);
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
